<template>
  <div class="property">
    <el-card>
      <div class="content-tree">
        <ul>
          <li v-for="(cmc, index) in groupList" :key="cmc.cmc_key">
            <div>
              <div class="title-icon df ai-c">
                <span style="font-weight: 600;">{{cmc.cmc_name}}</span>
              </div>
              <div class="df fw-w content-li">  
                <el-card v-for="cme in cmc.children" :key="cme.cme_key" @click="toDetail(cme)">
                  <!-- <div><img :src="'/src/assets/images/cmdb/'+cme.cme_icon+'.svg'" alt="" /></div> -->
                  <div><img :src="'./cmdb/'+cme.cme_icon+'.svg'" alt="" /></div>
                  <div class="df fd-c js-sb ">
                    <span class="ov1" style="width:100px;">
                      <el-tooltip class="box-item" effect="dark" :content="cme.cme_name" placement="top-start">
                        <span> {{cme.cme_name}}</span>
                      </el-tooltip>
                    </span>
                    <span class="ov1" style="width:100px;">{{cme.cme_key}}</span>
                  </div>
                </el-card>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-card>

    <!-- 资产详情 -->
    <el-drawer v-model="drawerVisible" title="资产详情" direction="rtl" size="100%">
      <ProDrawer ref="proDrawerRef" :cme_key="cme_key"  :model_id="model_id"></ProDrawer>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import ProDrawer from './ProDrawer.vue'
import { modelGroupList ,propertyDetailList} from '@/api/cmdb/model'
const data = reactive({
  drawerVisible:false,
  groupList:[],
  cme_key:"",//详情使用
  model_id:""
})
const {drawerVisible,groupList,cme_key,model_id} = toRefs(data)
const proDrawerRef = ref()
/* 详情 */
const toDetail = async(cme)=>{
  console.log(cme);
  model_id.value = cme._id
  cme_key.value = cme.cme_key

  drawerVisible.value = true
  // await proDrawerRef.value?.getDetailList()

}

const getGroupList = async()=>{
 const res=  await modelGroupList({})
 console.log(res);
 groupList.value = res.data

}
onMounted(()=>{

getGroupList()
})
</script>

<style scoped lang="scss">
.property {
  padding: 8px;
  .content-tree {
    ul {
      li {
        margin-top: 20px;
        .el-card {
          border: 1px solid #fff;
          margin: 10px 10px 0 0;
          :deep(.el-card__body) {
            padding: 15px !important;
            display: flex;
            align-items: center;
            > div:nth-child(1) {
              img {
                width: 42px;
                height: 42px;
              }
            }
            > div:nth-child(2) {
              padding: 0 12px;
              height:40px;
              display:flex;
              justify-content: space-between;
              align-items: center;
              span:nth-child(1) {
                font-size: 14px;
              }
              span:nth-child(2) {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
  .el-overlay .el-overlay-dialog .el-dialog {
    margin: 0;
  }
}

ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
</style>
